<template>
  <div class="home">
    <a-spin :spinning="spinning" :tip="tipContent">
      <a-layout style="height: 100%;">
        <top-header :showFun="showFun" @onSearch="onSearch" @exportFolder="exportFolder" @exportFile="exportFile"></top-header>
        <a-layout style="height: calc(100% - 64px)">
          <a-layout-sider
            :style="{ width: isShowLeft ? '250px' : '0',
            minWidth: isShowLeft ? '250px' : '0',
            maxWidth: isShowLeft ? '250px' : '0', }">
            <!-- 全宗选择下拉框 -->
            <a-select
              style="width: 100%"
              v-model="selectTree"
              @change="handleChange"
            >
              <a-select-option v-for="(item, index) in fondsData" :key="index" :value="item.qZ_Id">
                {{ item.qZ_Name }}
              </a-select-option>
            </a-select>
            <!-- 分类树 -->
            <tree :setting="setting" :nodes="treeData" @onClick="treeonSelect" v-if="isShowLeft" />
            <!-- 左侧显示与隐藏按钮 -->
            <div
              class="unfold-icon"
              :style="{ backgroundPosition: isShowLeft ? '-20px 0' : '0 0' }"
              @click="onShowLeft"></div>
          </a-layout-sider>
          <a-layout-content>
            <Split style="height: 100%;" direction="vertical" @onDragEnd="onDragEnd" @onDrag="onDrag" @onDragStart="onDragStart">
              <SplitArea :size="50" :minSize="0" style="position: relative;overflow-y: hidden;">
                <!-- 案卷表格模块 -->
                <u-table
                  use-virtual
                  highlight-current-row
                  showBodyOverflow="title"
                  showHeaderOverflow="title"
                  :data="floderTableData"
                  size="mini"
                  @row-click="folderClick"
                  :row-height="40"
                  :height="tableHeight1"
                  border
                  :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
                  style="width: 100%;">
                  <u-table-column
                    type="selection"
                    width="50">
                  </u-table-column>
                  <template>
                    <slot v-for="(item,index) in tableColumns">
                      <u-table-column
                        :key="index"
                        :property="item.field"
                        :label="item.title"
                        :width="item.width"
                        show-overflow-tooltip
                        sortable>
                      </u-table-column>
                    </slot>
                  </template>
                </u-table>
                <!-- 分页 -->
                <div class="loadImg" v-if="flag">
                  <a-tooltip placement="left" @click="nextPage">
                    <template slot="title">
                      <span>下一页</span>
                    </template>
                    <div class="loadImg-box">
                      <a-icon type="caret-right" />
                    </div>
                  </a-tooltip>
                  <a-tooltip placement="left" @click="allPage">
                    <template slot="title">
                      <span>全部数据</span>
                    </template>
                    <div class="loadImg-box">
                      <a-icon type="forward" />
                    </div>
                  </a-tooltip>
                </div>
              </SplitArea>
              <SplitArea :size="50" :minSize="0">
                <Split style="height: 100%;">
                  <SplitArea :size="50" :minSize="0" style="overflow-y: hidden;">
                    <!-- 卷内表格 -->
                    <u-table
                      use-virtual
                      highlight-current-row
                      showBodyOverflow="title"
                      showHeaderOverflow="title"
                      :data="fileTableData"
                      size="mini"
                      @row-click="fileClick"
                      :row-height="40"
                      :height="tableHeight2"
                      border
                      :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
                      style="width: 100%;">
                      <u-table-column
                        type="selection"
                        width="50">
                      </u-table-column>
                      <template>
                        <slot v-for="(item,index) in fileColumns">
                          <u-table-column
                            :key="index"
                            :property="item.field"
                            :label="item.title"
                            :width="item.width"
                            show-overflow-tooltip
                            sortable>
                          </u-table-column>
                        </slot>
                      </template>
                    </u-table>
                  </SplitArea>
                  <SplitArea :size="50" :minSize="0" style="overflow-y: hidden;">
                    <!-- 全文表格 -->
                    <u-table
                      use-virtual
                      highlight-current-row
                      showBodyOverflow="title"
                      showHeaderOverflow="title"
                      :data="fullTableData"
                      size="mini"
                      @row-dblclick="fulldblClick"
                      :row-height="40"
                      :height="tableHeight2"
                      border
                      :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
                      style="width: 100%;">
                      <u-table-column
                        type="selection"
                        width="50">
                      </u-table-column>
                      <template>
                        <slot v-for="(item,index) in fullColumns">
                          <u-table-column
                            :key="index"
                            :property="item.field"
                            :label="item.title"
                            :width="item.width"
                            show-overflow-tooltip
                            sortable>
                          </u-table-column>
                        </slot>
                      </template>
                    </u-table>
                  </SplitArea>
                </Split>
              </SplitArea>
            </Split>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-spin>
  </div>
</template>

<script>
import _deepClone from 'lodash.clonedeep'
import TopHeader from '@/components/TopHeader'
import { getFondsList, getTreeList, getFolderList, getFileList, getFullList, exportArchivesVol, exportArchivesFile, downloadFile } from '@/request/api'
import { mapState } from 'vuex'
import tree from 'vue-giant-tree'
export default {
  name: 'Home',
  components: {
    TopHeader,
    tree
  },
  computed: {
    ...mapState({
      floderTableData: state => state.floderTableData // 案卷表格数据
    })
  },
  data () {
    return {
      setting: {
        check: {
          enable: false
        },
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pId'
          },
          key: {
            name: 'name'
          }
        },
        view: {
          showIcon: false
        }
      },
      userData: JSON.parse(sessionStorage.getItem('USER_DATA')),
      showFun: true,
      spinning: false, // 加载状态
      tipContent: '', // 全局加载提示文字
      isShowLeft: true, // 左侧显示状态
      windowHeight1: 0, // 记录初始化屏幕数据显示高度
      windowHeight2: 0, // 记录初始化屏幕数据显示高度
      tableHeight1: 0, // 动态计算案卷表格高度
      tableHeight2: 0, // 动态计算文件表格高度
      fondsData: [], // 全宗树
      fondsId: '', // 全宗选中id
      treeId: '', // 分类树id
      selectTree: '',
      treeData: [], // 左侧树
      canClickNext: true, // 点击下一页锁标志
      pageIndex: 0, // 案卷查询分页起始页
      flag: false, // 案卷表格分页是否显示
      folderId: '', // 案卷表格id
      tableColumns: [ // 案卷表格标题数据
        {
          title: '序号',
          field: 'aaV_Order'
        },
        {
          title: '档案局档号',
          field: 'aaV_RecordOfficeFileNumber'
        },
        {
          title: '姓名',
          field: 'aaV_StaffName'
        },
        {
          title: '性别',
          field: 'aaV_Sex'
        },
        {
          title: '出生日期',
          field: 'aaV_Birthdate'
        },
        {
          title: '死亡日期',
          field: 'aaV_Deathdate'
        },
        {
          title: '所属单位',
          field: 'catalogName'
        },
        {
          title: '户籍所在地',
          field: 'aaV_Address'
        },
        {
          title: '身份证号',
          field: 'aaV_IDNumber'
        },
        {
          title: '页数',
          field: 'aaV_Pages'
        },
        {
          title: '保管期限',
          field: 'aaV_RetentionPeriod'
        },
        {
          title: '备注',
          field: 'aaV_Remark'
        }
      ],
      fileTableData: [], // 文件表格数据
      fileColumns: [ // 文件表格标题数据
        {
          title: '文件序号',
          field: 'aaF_Order'
        },
        {
          title: '档号',
          field: 'aaF_FileNum'
        },
        {
          title: '保管期限',
          field: 'aaF_RetentionPeriod'
        },
        {
          title: '材料名称',
          field: 'aaF_Name'
        },
        {
          title: '文件日期',
          field: 'aaF_FileDate'
        },
        {
          title: '页号',
          field: 'aaF_PageNum'
        },
        {
          title: '备注',
          field: 'aaF_Remark'
        }
      ],
      fullTableData: [], // 全文表格数据
      fullColumns: [ // 全文表格标题数据
        {
          title: '顺序号',
          field: 'aA_Order'
        },
        {
          title: '文件名',
          field: 'aA_Title'
        },
        {
          title: '文件大小',
          field: 'aA_Size'
        },
        {
          title: '创建时间',
          field: 'aA_CreateTime'
        }
      ],
      imgList: [] // 全文拿到的图片集合
    }
  },
  created () {
    this.getFondsData()
    this.$store.commit('SET_FLODERTABLE_DATA', [])
  },
  mounted () {
    this.windowHeight1 = _deepClone(window.innerHeight - 92)
    this.tableHeight1 = (window.innerHeight - 92) / 2
    this.windowHeight2 = _deepClone(window.innerHeight - 92)
    this.tableHeight2 = (window.innerHeight - 92) / 2
  },
  methods: {
    // 获取全宗数据
    getFondsData () {
      const param = { id: this.userData.aU_Id }
      getFondsList(param).then(res => {
        if (res.data.length > 0) {
          this.fondsData = res.data
          this.selectTree = this.fondsData[0].qZ_Id
          this.getTreeData(this.selectTree)
        }
      })
    },
    // 切换全宗
    handleChange (value) {
      this.getTreeData(value)
    },
    // 获取查询树数据
    getTreeData (value) {
      this.fondsId = value
      const param = {
        id: this.userData.aU_Id,
        qZ_Id: value
      }
      getTreeList(param).then(res => {
        console.log(res)
        res.data.forEach(item => {
          item['open'] = true
        })
        this.treeData = res.data
      })
    },
    // 点击左侧树查询案卷表格数据
    treeonSelect (evt, id, treeNode) {
      this.datas = []
      this.pageIndex = 0
      this.treeId = treeNode.id
      this.$store.commit('SET_FLODERTABLE_DATA', [])
      this.fileTableData = []
      this.fullTableData = []
      this.getFolderData()
    },
    // 获取案卷表格数据
    getFolderData () {
      const param = {
        aU_Id: this.userData.aU_Id, // 用户id
        aC_Id: this.treeId, // 分类树id
        qZ_Id: this.fondsId, // 全宗id
        page: this.pageIndex,
        pageCount: 10
      }
      getFolderList(param).then(res => {
        this.flag = true
        this.canClickNext = true
        if (this.datas.length === 0) {
          this.datas = [...this.floderTableData, ...res.data]
        } else {
          this.datas.push(...res.data)
        }
        this.$store.commit('SET_FLODERTABLE_DATA', this.datas)
        if (this.datas.length === res.total) {
          this.flag = false
        }
      })
    },
    // 下一页数据
    nextPage () {
      if (this.canClickNext) {
        this.canClickNext = false
        this.pageIndex++
        this.getFolderData()
      }
    },
    // 所有数据
    allPage () {
      if (this.canClickNext) {
        this.canClickNext = false
        this.pageIndex++
        const param = {
          aU_Id: this.userData.aU_Id, // 用户id
          aC_Id: this.treeId, // 分类树id
          qZ_Id: this.fondsId, // 全宗id
          page: this.pageIndex,
          pageCount: 10
        }
        getFolderList(param).then(res => {
          this.flag = true
          this.spinning = true
          this.tipContent = '正在加载案卷数据...'
          this.canClickNext = true
          if (this.datas.length === 0) {
            this.datas = [...this.floderTableData, ...res.data]
          } else {
            this.datas.push(...res.data)
          }
          if (this.datas.length === res.total) { // 加载完毕
            console.log('加载完毕')
            this.$store.commit('SET_FLODERTABLE_DATA', this.datas)
            this.spinning = false
            this.flag = false
          } else {
            console.log('正在加载')
            this.allPage()
          }
        })
      }
    },
    // 案卷表格点击查询卷内表格数据和全文表格数据
    folderClick (row) {
      this.folderId = row.aaV_Id
      this.getFileData(row)
      this.getFullData(row, 'folder')
    },
    // 卷内表格点击事件
    fileClick (row) {
      this.getFullData(row, 'file')
    },
    // 获取卷内表格数据
    getFileData (row) {
      const param = {
        aU_Id: this.userData.aU_Id, // 用户id
        aC_Id: this.treeId, // 分类树id
        qZ_Id: this.fondsId, // 全宗id
        aaV_Id: row.aaV_Id // 案卷id
      }
      getFileList(param).then(res => {
        this.fileTableData = res.data
      })
    },
    // 获取全文表格数据
    getFullData (row, type) {
      if (type === 'folder') { // 案卷全文
        const param = {
          record_Id: row.aaV_Id, // 查询id
          qZ_Id: this.fondsId // 全宗id
        }
        getFullList(param).then(res => {
          this.fullTableData = res.data
        })
      } else if (type === 'file') { // 卷内全文
        const param = {
          record_Id: row.aaF_Id, // 查询id
          qZ_Id: this.fondsId // 全宗id
        }
        getFullList(param).then(res => {
          this.fullTableData = res.data
          this.imgList = []
          res.data.forEach(item => {
            if (item.aA_Type === '2') {
              this.imgList.push({
                url: item.aA_Url,
                title: item.aA_Title
              })
            }
          })
        })
      }
    },
    // 左侧树显示状态切换
    onShowLeft () {
      this.isShowLeft = !this.isShowLeft
    },
    // 退出登录
    loginOut () {
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗?',
        onOk: () => {
          sessionStorage.clear() // 清除sessionStorage
          window.location.reload()
        }
      })
    },
    // 案卷表格数据Excel导出
    exportFolder () {
      if (this.treeId && this.fondsId) {
        this.spinning = true
        this.tipContent = '正在导出案卷数据...'
        const param = {
          aU_Id: this.userData.aU_Id, // 用户id
          aC_Id: this.treeId, // 分类树id
          qZ_Id: this.fondsId, // 全宗id
          page: 0,
          pageCount: 10 * (this.pageIndex + 1)
        }
        exportArchivesVol(param).then(res => {
          const downloadParam = {
            filePath: res.data,
            delete: 1
          }
          // 下载文件
          downloadFile(downloadParam, '人员信息表.xls').then(res => {
            this.spinning = false
          })
        })
      } else {
        this.$message.warning('请选中导出数据')
      }
    },
    // 卷内表格数据Excel导出
    exportFile () {
      if (this.treeId && this.fondsId && this.folderId) {
        this.spinning = true
        this.tipContent = '正在导出卷内数据...'
        const param = {
          aU_Id: this.userData.aU_Id, // 用户id
          aC_Id: this.treeId, // 分类树id
          qZ_Id: this.fondsId, // 全宗id
          aaV_Id: this.folderId // 案卷id
        }
        exportArchivesFile(param).then(res => {
          const downloadParam = {
            filePath: res.data,
            delete: 1
          }
          // 下载文件
          downloadFile(downloadParam, '档案材料表.xls').then(res => {
            this.spinning = false
          })
        })
      } else {
        this.$message.warning('请选中导出数据')
      }
    },
    // 案卷查询
    onSearch (value) {
      console.log(value)
      if (this.treeId && this.fondsId) {
        this.flag = false
        if (value) {
          const param = {
            aU_Id: this.userData.aU_Id, // 用户id
            aC_Id: this.treeId, // 分类树id
            qZ_Id: this.fondsId, // 全宗id
            aaV_Keyword: value
          }
          getFolderList(param).then(res => {
            this.$store.commit('SET_FLODERTABLE_DATA', [])
            this.$store.commit('SET_FLODERTABLE_DATA', res.data)
          })
        } else {
          this.$message.warning('请输入查询内容')
        }
      } else {
        this.$message.warning('请选中左侧树节点')
      }
    },
    // 全文表格双击打开事件
    fulldblClick (row) {
      if (row.aA_Type === '2') { // 全文图片打开
        this.imgList = this.imgList.filter(item => {
          return item.url !== row.aA_Url
        })
        this.imgList.unshift({
          url: row.aA_Url,
          title: row.aA_Title
        })
        this.spinning = true
        this.tipContent = '正在生成预览文件...'
        setTimeout(() => {
          this.spinning = false
          var routeData = this.$router.resolve({
            path: '/previewImg',
            query: {
              file: JSON.stringify(this.imgList)
            }
          })
          window.open(routeData.href, '_blank')
        }, 2000)
      } else if (row.aA_Type === '10') { // 全文pdf打开
        this.spinning = true
        this.tipContent = '正在生成预览文件...'
        setTimeout(() => {
          this.spinning = false
          var routeData = this.$router.resolve({
            path: '/previewPdf',
            query: {
              file: JSON.stringify({ url: row.aA_Url, title: row.aA_Title })
            }
          })
          window.open(routeData.href, '_blank')
        }, 2000)
      }
    },
    // split组件拖拽开始监听事件
    onDragStart (size) {
      this.tableHeight1 = this.windowHeight1 * size[0] * 0.01
      this.tableHeight2 = this.windowHeight2 * size[1] * 0.01
    },
    // split组件拖拽中监听事件
    onDrag (size) {
       this.tableHeight1 = this.windowHeight1 * size[0] * 0.01
       this.tableHeight2 = this.windowHeight2 * size[1] * 0.01
    },
    // split组件拖拽完毕监听事件
    onDragEnd (size) {
      this.tableHeight1 = this.windowHeight1 * size[0] * 0.01
      this.tableHeight2 = this.windowHeight2 * size[1] * 0.01
    }
  }
}
</script>

<style scoped lang="less">
.home {
  width: 100%;
  height: 100%;
  /deep/ .ant-spin {
    max-height: 100%;
  }
  aside {
    background: #FFF;
    /deep/ .ant-layout-sider-children {
      display: flex;
      flex-direction: column;
      .ant-select {
        .ant-select-selection {
          border-radius: inherit;
        }
      }
      .ztree {
        flex: 1;
        overflow: auto;
        padding: 10px 0 0 10px;
      }
      .unfold-icon {
        position: absolute;
        top: 50%;
        right: -16px;
        margin-top: -54px;
        z-index: 300;
        background-image: url(../../assets/img/btns.png);
        width: 16px;
        height: 60px;
        background-position: -20px 0;
        background-size: 200px 140px;
        cursor: pointer;
        &:hover {
          opacity: .5;
        }
      }
    }
  }
  main {
    padding: 10px;
    .loadImg {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: flex;
      flex-direction: column;
      .loadImg-box {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #303136;
        opacity: .5;
        cursor: pointer;
        box-shadow: 0 0 5px 0 rgba(2,2,2,.2);
        color: #999;
        margin-bottom: 6px;
        transition: all .2s;
        display: flex;
        justify-content: center;
        align-items: center;
        .anticon {
          font-size: 20px;
          color: #999;
        }
      }
    }
  }
}
</style>
